<!DOCTYPE html>
<html >
    <head>
        <meta charset="UTF-8">
        <title>逻辑语法</title>
        <link rel='stylesheet' type='text/css' href='../css/c1.css'>
        <script>
            window.onload =function () {
                var drow = function () {
                    var cc = prompt("请输入1,2,3中的一个");
                    switch (cc) {
                        case "1":
                           alert(1);
                            break;
                        case "2":
                            alert(2);
                            break;
                        case "3":
                            alert(3);
                            break;
                        default:
                            break;
                    }
                };
                document.getElementById('sw').onclick = function () {
                drow();
            };
                //if
                document.getElementById('btn1').onclick = function () {
                    var a = prompt('请输入1,2,3中的一个，');
                        if(a==1){
                            alert(1);
                            return false;
                        }
                        if(a==2){
                            alert(2);
                            return false;
                        }
                        if(a==3){
                            alert(3);
                            return false;
                        }
                    };
                //if else
                document.getElementById('btn2').onclick = function () {
                        var a = prompt();
                        if (a<20)
                        {
                            alert("Good day");
                        }
                        else
                        {
                            alert("Good evening");
                        }
                    };
                //if else if
                document.getElementById('btn3').onclick = function () {
                        var a = prompt();
                        if (a<10)
                        {
                            alert("Good day");
                        }
                        else
                        {
                            alert("Good evening");
                        }
                        if (a>30){
                            alert('你好无聊啊！');
                        }
                    };
                var a = prompt();
                if (a == ''){
                    alert('请输入1,2,3中的一个，');//当输入框内容为空时
                }else {
                    if(a==1){
                        alert(1);
                        return false;
                    }
                    if(a==2){
                        alert(2);
                        return false;
                    }
                    if(a==3){
                        alert(3);
                        return false;
                    }
                }
            };
        </script>
    </head>
    <body>
    <div class="title">逻辑语法</div>
    <div></div>
    <div class="code">
    <div class="title">if
    <div class="title">代码示例</div>
    <div class="code">
        <pre>
             var a = prompt();
                if (a == ''){
                    alert('请输入1,2,3中的一个，');//当输入框内容为空时
                }else {
                    <span>if</span>(a==1){
                        alert(1);
                        return false;
                    }
                    <span>if</span>(a==2){
                        alert(2);
                        return false;
                    }
                    <span>if</span>(a==3){
                        alert(3);
                        return false;
                    }
                }
        </pre>
    </div>
    <div class="title">代码效果</div>
    <div class="code">
        <button id="btn1">点击查看效果</button>
    </div>
    </div>
    </div>
    <hr/>
    <div class="title">swith
        <div class="title">代码示例</div>
        <div class="code">
            <pre>
                var cc = prompt("请输入1,2,3中的一个");
                    switch (cc) {
                        case "1":
                           alert(1);
                            break;
                        case "2":
                            alert(2);
                            break;
                        case "3":
                            alert(3);
                            break;
                        default:
                            break;
                    }
            </pre>
        </div>
        <div class="title">代码效果</div>
        <div class="code">
            <button id = 'sw'>点击查看效果</button>
        </div>
    </div>
    <div class="title">if else
    <div class="title">代码示例</div>
    <div class="code">
        <pre>
        var a = prompt();
        <span>if</span> (a<20)
        {
        alert("Good day");
        }
        <span>else</span>
        {
        alert("Good evening");
        }
        </pre>
    </div>
    <div class="title">代码效果</div>
    <div class="code">
        <button id="btn2">点击查看效果</button>
    </div>
    </div>
    <hr/>

    <div class="title">if else if
        <div class="title">代码示例</div>
        <div class="code">
            <pre>
                 var a = prompt();
                <span>if</span> (a<10)
                    {
                        alert("Good day");
                    }
                <span>else</span>
                    {
                        alert("Good evening");
                    }
                <span>if</span> (a>30){
                        alert('你好无聊啊！');
                    }
            </pre>
        </div>
        <div class="title">代码效果</div>
        <div class="code">
            <button id="btn3">点击查看效果</button>
        </div>
    </div>
    <hr/>
    <div class="title">for
        <div class="title">代码示例</div>
        <div class="code">
            <pre>
                <span>for</span> (var i=1; i<10; i++)
                    {
                <span>for</span> (var j=1; j<=i; j++)
                        {
                            document.write("*");
                        }

                        document.write("&lt;br/&gt;");
                    }
            </pre>
        </div>
        <div class="title">代码效果</div>
        <div class="code">
            <div id="btn4">
                <script>
                    for (var i=1; i<10; i++)
                    {
                        for (var j=1; j<=i; j++)
                        {
                            document.write("*");
                        }

                        document.write("<br/>");
                    }
                </script>
            </div>
        </div>
    </div>
    <hr/>
    <div class="title">while
        <div class="title">代码示例</div>
        <div class="code">
            <pre>
               var i = 0;
                <span>while</span> (i < 10) {
                        i++;
                        var j = 0;
                <span>while</span> (j < i) {
                            j++;
                            document.write("*");
                        }
                        document.write("&lt;br/&gt;");
            </pre>
        </div>
        <div class="title">代码效果</div>
        <div class="code">
            <div id="btn5">
                <script>
                    var i = 0;
                    while (i < 10) {
                        i++;
                        var j = 0;
                        while (j < i) {
                            j++;
                            document.write("*");
                        }
                        document.write("<br/>");
                    }
                </script>
            </div>
        </div>
    </div>
    <div class="title">do while
        <div class="title">代码示例</div>
        <div class="code">
            <pre>
                <span>do</span>
                    {
                        document.write( i +'*');
                        i++;
                    }
                <span>while</span> (i<5);
            </pre>
        </div>
        <div class="title">代码效果</div>
        <div class="code">
            <div id="btn6">
                <script>
                    do
                    {
                        document.write( i +'*');
                        i++;
                    }
                    while (i<5);
                </script>
            </div>
        </div>
    </div>

    </body>
</html>